<template>
    <div class="ls-add-admin">
        <div class="ls-card ls-coupon-edit__form m-t-10">
            <div class="nr weight-500 m-b-20">身份信息</div>
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <!-- 身份名称 -->
                <el-form-item label="身份名称" required>
                    <el-input :disabled="disabled" class="ls-input" v-model="form.name" placeholder="请输入身份名称">
                    </el-input>
                </el-form-item>

                <el-form-item label="身份描述">
                    <el-input
                        type="textarea"
                        :disabled="disabled"
                        placeholder="请输入内容"
                        style="width: 350px"
                        rows="8"
                        v-model="form.remark"
                        maxlength="30"
                        show-word-limit
                    />
                </el-form-item>
                <el-form-item label="福利赠送" prop="welfare_switch" required>
                    <el-radio v-model="form.welfare_switch" :label="1" :disabled="disabled">开启</el-radio>
                    <el-radio v-model="form.welfare_switch" :label="2" :disabled="disabled">关闭</el-radio>
                </el-form-item>
            </el-form>
        </div>

        <welfare v-if="form.welfare_switch == 1" :mode="mode" :welfare.sync="editInfoWelfare" :disabled="disabled">
        </welfare>

        <div class="ls-card m-t-16">
            <div class="card-title">等级权益</div>
            <div class="card-content m-t-24">
                <el-form ref="form" :model="form" label-width="120px" size="small">
                    <el-form-item label="等级折扣" prop="level_discount">
                        <div>
                            <span class="m-r-5">参与等级折扣</span>
                            <el-input
                                class="ls-input"
                                v-model="form.discount"
                                size="small"
                                :disabled="disabled"
                            ></el-input>
                            <span class="m-l-5">折</span>
                        </div>
                        <div class="muted xs m-r-16">
                            购买符合条件的商品时，可以使用等级折扣进行优惠。填写0到10之间的数字，可以保留小数点2位数字
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="ls-card ls-coupon-edit__form m-t-10">
            <div class="nr weight-500 m-b-20">
                <span>身份佣金收益</span>
                <span class="desc">以下收益不填写时，不产生收益</span>
            </div>
            <div>
                <!-- 
                    province=省市代理；city=市代理；district=区代理；founders=联合创始人
                 -->
                <el-form ref="form2" :model="form" label-width="120px" size="small">
                    <el-form-item label="身份类型" required>
                        <el-radio-group v-model="benefitType" @input="benefitTypeChangeHandler">
                            <el-radio
                                :label="item.key"
                                v-for="item in benefitTypeList"
                                :key="item.key"
                                :disabled="disabled"
                                >{{ item.label }}</el-radio
                            >
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>

            <template v-if="benefitType">
                <component
                    :is="benefitType"
                    :benefit.sync="activeBenefitTypeInfo"
                    :mode="mode"
                    :disabled="disabled"
                    :visible="visible"
                    @update:benefit="updateInfoHandler"
                ></component>
            </template>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Ref, Vue, Watch } from 'vue-property-decorator'

import { apiDistributionIdentityAdd, apiDistributionIdentityEdit } from '@/api/distribution/distribution'
import { PageMode } from '@/utils/type'

import city from './distribution_identity_city.vue'
import district from './distribution_identity_company.vue'
import partner from './distribution_identity_partner.vue'
import founders from './distribution_identity_founders.vue'
import province from './distribution_identity_province.vue'
import welfare from './distribution_identity_welfare.vue'

const benefitTypeList = [
    //  province=省市代理；city=市代理；company=分公司；founders=联合创始人
    // {
    //     label: '省市代理',
    //     key: 'province'
    // },
    // {
    //     label: '市代理',
    //     key: 'city'
    // },
    // {
    //     label: '区/县代理',
    //     key: 'district'
    // },
    // {
    //     label: '联营',
    //     key: 'founders'
    // },
    {
        label: '合伙人',
        key: 'partner'
    }
]
@Component({
    components: {
        province,
        city,
        founders,
        district,
        welfare,
        partner
    }
})
export default class DistributionGradeEdit extends Vue {
    @Ref() readonly formRef!: Element
    @Prop({ default: '' }) id!: string | number
    @Prop({ default: PageMode.ADD }) mode!: string
    @Prop({ default: false }) visible!: boolean
    @Prop({
        default() {
            return {}
        }
    })
    editInfo!: any
    /** S Data **/
    identity: number | null = null // 当前编辑用户的身份ID  valid: mode = 'edit'
    roleList: Array<object> = [] // 角色的数据

    disabled: any = false
    benefitType = 'founders'
    benefitTypeList = [...benefitTypeList]
    benefitTypeInfos: any = new Map()

    activeBenefitTypeInfo: any = {}
    editInfoWelfare = {
        contribution: '',
        points: '',
        balance: ''
    }
    // 添加管理员表单数据
    form: any = {
        name: '', //是	string	身份名称
        remark: '', //否	string	身份备注
        welfare_switch: '2',
        discount: ''
    }
    oldFormName = ''

    selectGoods: any = [] //商品选择的商品数据
    /** E Data **/

    /** S computed */

    get benefit() {
        if (this.editInfo && this.editInfo.benefit) {
            return this.editInfo.benefit
        }
        return {}
    }
    // 省公司的数据
    get benefitProvince() {
        if (this.benefit && this.benefit.province) {
            return {
                province: this.benefit.province
            }
        }
        return {
            province: ''
        }
    }
    // 市公司的数据
    get benefitCity() {
        if (this.benefit && this.benefit.city) {
            return {
                city: this.benefit.city
            }
        }
        return {
            city: ''
        }
    }
    get benefitDistrict() {
        if (this.benefit && this.benefit.district) {
            return {
                district: this.benefit.district
            }
        }
        return {
            district: ''
        }
    }
    get benefitPartner() {
        if (this.benefit && this.benefit.partner) {
            return {
                partner: this.benefit.partner
            }
        }
        return {
            partner: ''
        }
    }
    // 联营的数据
    get benefitFounders() {
        if (this.benefit && this.benefit.founders) {
            return {
                founders: this.benefit.founders
            }
        }
        return {
            founders: ''
        }
    }
    set benefitFounders(v: any) {
        // console.log('set benefitFounders', v)
    }

    /** E computed */

    /** S Watch */

    @Watch('visible')
    visibleChangeHandler(v: boolean) {
        this.initForm()
    }
    @Watch('benefitType')
    benefitTypeChangeHandler(v: string) {
        this.activeBenefitTypeInfo = this.benefitTypeInfos.get(v) || {}
    }
    /** E Watch */

    /** S Life Cycle **/
    created() {
        this.initForm()
        // 获取角色列表
    }
    /** E Life Cycle **/

    /** S Methods **/

    initForm() {
        this.disabled = false
        this.benefitType = this.editInfo?.type || this.benefitTypeList[this.benefitTypeList.length - 1].key
        this.benefitTypeInfos.clear()

        this.benefitTypeInfos.set('province', this.benefitProvince)
        this.benefitTypeInfos.set('city', this.benefitCity)
        this.benefitTypeInfos.set('district', this.benefitDistrict)
        this.benefitTypeInfos.set('founders', this.benefitFounders)
        this.benefitTypeInfos.set('partner', this.benefitPartner)
        this.activeBenefitTypeInfo = this.benefitTypeInfos.get(this.benefitType) || {}
        if (this.mode === PageMode.ADD) {
            // 这里主要是要他的 info
            this.benefitTypeList = [...benefitTypeList]
            this.form = Object.assign(
                {},
                {
                    name: '',
                    remark: '',
                    welfare_switch: 2,
                    level_discount: 0, //等级折扣
                    discount: ''
                }
            )
            this.oldFormName = ''
            this.editInfoWelfare = {
                contribution: '',
                points: '',
                balance: ''
            }
            return
        }
        if (this.mode === 'preview') {
            this.disabled = true
        }
        this.oldFormName = this.editInfo.name
        const form = this.editInfo || this.form
        this.form = Object.assign(
            {},
            {
                name: form.name,
                remark: form.remark,
                welfare_switch: form.welfare_switch,
                discount: form.discount || ''
            }
        )
        this.editInfoWelfare = Object.assign({}, this.editInfoWelfare, {
            ...this.editInfo.welfare
        })
        // console.table('editInfo2', this.form)
        // this.benefitTypeInfos
    }

    updateInfoHandler(v: any) {
        this.benefitTypeInfos.set(this.benefitType, v)
    }

    // 点击表单提交
    onSubmit(formName: string) {
        // 请求发送
        switch (this.mode) {
            case 'add':
                return this.GradeAdd()
            case 'edit':
                return this.GradeEdit()
        }
    }

    // 编辑
    GradeEdit() {
        const config = this.getSubmitRequestConfig()

        apiDistributionIdentityEdit(config).then(() => {
            this.successHandler()
        })
    }

    // 添加
    GradeAdd() {
        const config = this.getSubmitRequestConfig()
        apiDistributionIdentityAdd({ ...config }).then(() => {
            this.successHandler()
        })
    }
    getSubmitRequestConfig() {
        let benefit = this.activeBenefitTypeInfo
        //
        // if (this.benefitType === 'founders') {
        //     benefit = this.activeBenefitTypeInfo
        // }
        const config = {
            ...this.form,
            benefit: benefit,
            welfare: this.editInfoWelfare,
            type: this.benefitType
        }
        if (this.mode === PageMode.ADD) {
            return config
        }
        return {
            ...config,
            id: this.editInfo.id
        }
    }
    successHandler() {
        this.$emit('success')
    }
    addLadderItem() {
        if (this.form.benefit.direct.ladder >= 3) {
            return
        }
        this.form.benefit.direct.ladder.push({
            number: '',
            rate: ''
        })
    }

    // 详情
    detail() {}

    /** E Methods **/
}
</script>

<style lang="scss" scoped>
.desc {
    color: #999;
    display: block;
}

.ls-add-admin {
    padding-bottom: 80px;

    .ls-input {
        width: 280px;
        margin-right: 20px;
    }
}
</style>
